"use strict";
let iptArr = [...document.getElementsByTagName('input')];
let btnArr = [...document.getElementsByTagName('button')];
let tbody = [...document.getElementsByTagName('tbody')];
let responsiveData = new Proxy({
    isAllSelect: false
}, {
    set(t, p, v) {
        t[p] = v;
        if (p == 'isAllSelect') {
            btnArr[3].innerText = v ? '全不选' : '全选';
        }
        ;
        return true;
    }
});
var field;
(function (field) {
    field["get"] = "get";
    field["set"] = "set";
    field["clear"] = "clear";
    field["delete"] = "delete";
})(field || (field = {}));
;
var responsiveField;
(function (responsiveField) {
    responsiveField["isAllSelect"] = "isAllSelect";
})(responsiveField || (responsiveField = {}));
const m = new Map();
let abc = 'abcdefghijkl';
for (let i = 0; i < 10; i++) {
    let key = abc[Number((Math.random() * (abc.length - 1)).toFixed(0))] + Math.random().toFixed(2);
    let val = abc[Number((Math.random() * (abc.length - 1)).toFixed(0))] + Math.random() * 100 + 1;
    m.set(key, val);
}
;
renderMap(tbody[0]);
function mapFind(fkey = '', fvalue = '') {
    [{ value: fkey }, { value: fvalue }] = iptArr;
    tbody[1].innerHTML = '';
    responsiveData.isAllSelect = false;
    [...tbody[0].children].map(element => {
        let [{ innerHTML: key }, { innerHTML: value }] = element.children;
        let keyInd = 0;
        let valueInd = 0;
        let condition1 = [...fkey].every(e => ((-1 != (keyInd = key.indexOf(e, keyInd))), keyInd += 1));
        let condition2 = [...fvalue].every(e => ((-1 != (valueInd = value.indexOf(e, valueInd))), valueInd += 1));
        if (condition1 && condition2) {
            let findEl = element.cloneNode(true);
            findEl.addEventListener('click', function (event) {
                if (event.target.innerText == '删除') {
                    m.delete(findEl.firstChild.innerText);
                    renderMap(tbody[0]);
                    mapFind();
                }
                ;
            });
            tbody[1].insertBefore(findEl, tbody[1].children[0]);
        }
        ;
    });
}
;
function _delete() {
    let [{ value: key }, { value }] = iptArr;
    let trs = tbody.map(e => [...e.children]).flat();
    let arr = trs.filter(tr => tr.getAttribute('select')).map(tr => {
        m.delete(tr.children[0].innerHTML);
        renderMap(tbody[0]);
        !(key == '' && value == '') && mapFind(key, value);
    });
    if (!arr.length)
        return alert('请选择数据！');
}
;
function isAll(thisArg) {
    let flag = thisArg.innerText == '全选';
    tbody.map(ele => [...ele.children].map(el => el.setAttribute("select", flag ? 'true' : '')));
    responsiveData.isAllSelect = flag;
}
;
function renderMap(ele) {
    tbody[0].innerHTML = '';
    tbody[1].innerHTML = '';
    responsiveData.isAllSelect = false;
    m.forEach((el, ind) => {
        let tr = document.createElement('tr');
        let div_key = document.createElement('td');
        let div_val = document.createElement('td');
        let delBtn = document.createElement('td');
        let btn = document.createElement('button');
        btn.addEventListener('click', function (event) {
            m.delete(ind);
            renderMap(tbody[0]);
            mapFind();
        });
        btn.innerText = '删除';
        div_key.innerText = ind;
        div_val.innerText = el;
        tr.append(div_key);
        tr.append(div_val);
        delBtn.append(btn);
        tr.append(delBtn);
        ele.insertBefore(tr, ele.children[0]);
    });
}
;
btnArr.map(ele => ele.addEventListener('click', function (event) {
    let [{ value: key }, { value }] = iptArr;
    if (this.innerText == '查询')
        return mapFind(key, value);
    if (this.innerText == '一键删除')
        return _delete();
    if (/全(不{0,1})选/.test(this.innerText))
        return isAll(this);
    if (iptArr[0].value == '' || (this.innerText == 'set' && iptArr[1].value == ''))
        return;
    let fieldFnName = this.innerText;
    m[fieldFnName](key, value);
    iptArr[0].value = '';
    iptArr[1].value = '';
    renderMap(tbody[0]);
}));
tbody.map(ele => ele.addEventListener('click', function (event) {
    let target = event.target;
    let _this = tbody[this.className.includes('content') ? 1 : 0];
    while (target.tagName != 'TR') {
        let parent = target.parentElement;
        target = parent;
        if (target.tagName == 'TR') {
            let flag = target.getAttribute("select") == 'true';
            target.setAttribute("select", flag ? '' : 'true');
            [..._this.children].map(ele => {
                if (ele.children[0].innerHTML == target.children[0].innerHTML) {
                    ele.setAttribute("select", flag ? '' : 'true');
                }
                ;
            });
            responsiveData.isAllSelect = tbody.map(e => [...e.children]).flat().every(e => e.getAttribute("select") == 'true');
        }
        ;
    }
    ;
}));
